<template>
 <view class="progressContainer">
	<view v-if="showpercentText" class="process-percent">
		<view class="percent">已出售{{parseInt(progress)}}%</view>
	</view>
	<view class="progress" :style="{width:widthchangeNum + '%'}"></view>
 </view>
</template>

<script>
  export default {
    name: 'cmd-progress',
    data(){
		return{
			widthchangeNum:0
		}
	},
	props:{
		progress:{
			type:[String,Number],
			default:0
		},
		showpercentText:{
			type:Boolean,
			default:true
		}
	},
	mounted(){
	},
	created() {
		setTimeout(()=>{			
		this.widthchangeNum = this.progress
		},100)		
	}    
  }
</script>

<style lang="scss">
.progressContainer{
	position: relative;
	height: 32rpx;
	width: 180rpx;
	border-radius: 16rpx;
	background: #e2e2e2;
	overflow: hidden;
	.progress{
	  width: 0;
	  background: #ff004f;
	  border-radius: 16rpx;
	  height:100%;
	  transition: all 2000ms ease;
	}
	.process-percent{
		position: absolute;
		top: 0;
		width: 180rpx;
		text-align: center;
		height: 28rpx;
		padding: 2rpx 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		.percent{
			color: #fff;
			font-size: 20rpx;
		}
	}
}
</style>
